<template>
  <div id="app">

    <router-view></router-view>
    <Tabbar :tabbarDatas="tabbarDatas" @click="selectAction"></Tabbar>
  </div>
</template>

<script>

  import Tabbar from './components/tabbar/Tabbar'

  // 图片导入
  import homeNormalImage from 'img/tabbar/home.svg'
  import homeActiveImage from 'img/tabbar/home_active.svg'

  import categoryNormalImage from 'img/tabbar/category.svg'
  import categoryActiveImage from 'img/tabbar/category_active.svg'

  import shopcartNormalImage from  'img/tabbar/shopcart.svg'
  import shopcartActiveImage from 'img/tabbar/shopcart_active.svg'

  import profileNormalImage from 'img/tabbar/profile.svg'
  import profileActiveImage from 'img/tabbar/profile_active.svg'


  export default {
    name: 'App',
    data:function(){
        
      return {
            tabbarDatas: [
                {
                  title:'首页',
                  normalImage:homeNormalImage,
                  activeImage:homeActiveImage,
                  normalColor:'#000',
                  activeColor:'#ff5777'
                },
                {
                    title:'分类',
                    normalImage:categoryNormalImage,
                    activeImage:categoryActiveImage,
                    normalColor:'#000',
                    activeColor:'#ff5777'
                },
                {
                    title:'购物车',
                    normalImage:shopcartNormalImage,
                    activeImage:shopcartActiveImage,
                    normalColor:'#000',
                    activeColor:'#ff5777'
                },
                {
                    title:'我的',
                    normalImage:profileNormalImage,
                    activeImage:profileActiveImage,
                    normalColor:'#000',
                    activeColor:'#ff5777'
                }
            ],
      }
    },
    methods:{
      selectAction(index){

        console.log(index);
        if (index == 0){

          this.$router.push('/home');
        }else if(index == 1){

          this.$router.push('/category');
        }else if (index == 2){

          this.$router.push('/shopcart');
        }else {

          this.$router.push('/profile');
        }
      }
    },
    mounted() {

    },
    components: {
      Tabbar
    }
}
</script>

<style>
  /*require('normalize.css');*/
  @import "~normalize.css";

</style>
